<template>
  <nav class="nav" :class="{ 'nav--transparent': isTransparent }">
    <!-- 顶部工具栏 -->
    <div class="nav-top">
      <div class="content">
        <div class="left">
          <!-- 预留时间显示区域 -->
          <span class="current-time"><b>国家授时中心标准时间：{{ currentTimeValue }}</b> </span>
        </div>
        <div class="right">
          <div class="tool-item">
            <img src="@/assets/homeimg/navIcon2.png" alt="手机App" />
            <el-tooltip placement="bottom" effect="light">
              <template #content>
                <div class="qrcode-box">
                  <img :src="$global.foot.qrcode" alt="App二维码" class="qr-img" />
                  <div class="qr-info">
                    <p class="title">斑马中国App</p>
                    <p class="desc">请扫描二维码</p>
                    <p class="desc">下载APP</p>
                  </div>
                </div>
              </template>
              <span>手机App</span>
            </el-tooltip>
          </div>
          <div class="tool-item">
            <img src="@/assets/homeimg/navIcon4.png" alt="公众号" />
            <el-tooltip placement="bottom" effect="light">
              <template #content>
                <div class="qrcode-box">
                  <img :src="$global.foot.qrcodewx" alt="公众号二维码" class="qr-img" />
                  <div class="qr-info">
                    <p class="title">斑马版权公众号</p>
                    <p class="desc">请扫描二维码</p>
                    <p class="desc">进入斑马版权公众号</p>
                  </div>
                </div>
              </template>
              <span>斑马版权公众号</span>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <!-- 主导航栏 -->
    <div class="nav-banner">
      <div class="inner">
        <div class="logo-box">
          <img src="@/assets/homeimg/blogo.png" alt="Logo" @click="toHome" />
        </div>
        
        <div class="nav-content">
          <div class="nav-box">
            <el-menu 
              :default-active="menuIndex" 
              mode="horizontal" 
              class="el-menu-demo"
              :background-color="isTransparent ? 'transparent' : '#333'"
              text-color="#fff"
              active-text-color="#53b7d7"
              :router="true"
            >
              <el-menu-item index="/" @click="handleSelect({path: '/'})">
                <span>首页</span>
              </el-menu-item>
              
              <el-sub-menu index="/copyright-registration">
                <template #title>版权服务</template>
                <el-menu-item 
                  index="/copyright-registration"
                  @click="handleSelect({path: '/copyright-registration'})"
                >
                  作品著作权登记
                </el-menu-item>
                <el-menu-item 
                  index="/app-copyright-registration"
                  @click="handleSelect({path: '/app-copyright-registration'})"
                >
                  软件著作权登记
                </el-menu-item>
                <el-menu-item 
                  index="/copyright/copyright-evidence"
                  @click="handleSelect({path: '/copyright/copyright-evidence'})"
                >
                  版权存证
                </el-menu-item>
              </el-sub-menu>
              
              <template v-for="item in otherMenuItems" :key="item.path">
                <el-menu-item 
                  :index="item.path"
                  @click="handleSelect(item)"
                >
                  <span>{{ item.title }}</span>
                </el-menu-item>
              </template>
            </el-menu>
          </div>

          <div class="auth-buttons" v-if="!isLoggedIn">
            <el-button 
              class="login-btn" 
              type="text"
              @click="goToLogin('login')"
            >
              登录
            </el-button>
            <el-button 
              class="register-btn" 
              type="primary" 
              @click="goToLogin('register')"
            >
              注册
            </el-button>
          </div>

          <div class="user-avatar" v-else>
            <el-dropdown @command="handleCommand">
              <span class="avatar">
                <img src="@/assets/homeimg/grzx.png" alt="用户头像" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="self">个人中心</el-dropdown-item>
                  <el-dropdown-item command="copyrightListing">存证列表</el-dropdown-item>
                  <el-dropdown-item command="exit">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
import { defineComponent, ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import dayjs from 'dayjs'

export default defineComponent({
  name: 'Nav',

  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()

    // 登录状态
    const isLoggedIn = computed(() => store.getters.isLoggedIn)
    
    // 当前时间显示
    const currentTimeValue = ref('')
    
    // 定义 a 和 o 变量
    const a = ref(null); // 根据您的逻辑初始化
    const o = 0; // 根据您的逻辑初始化
    let i = 0; // 根据您的逻辑初始化

    // 优化后的 currentTime 函数
    function updateCurrentTime() {
      var timeOffset, hours, minutes, sign;
      
      // 这里的逻辑可以根据需要调整
      const currentTime = (new Date).getTime() + o;
      timeOffset = (new Date).getTimezoneOffset();
      hours = Math.floor(-timeOffset / 60);
      minutes = Math.abs(timeOffset % 60);
      sign = hours < 0 ? "+" : "-";
      hours = Math.abs(hours).toString().padStart(2, '0');
      minutes = minutes.toString().padStart(2, '0');
      
      // 使用 Vue 的响应式特性更新 currentTimeValue
      currentTimeValue.value = dayjs(currentTime).format("YYYY-MM-DD HH:mm:ss:SSS") + "(UTC" + sign + hours + ":" + minutes + ")";
    }

    // 在页面加载时调用 currentTime 函数
    onMounted(() => {
      updateCurrentTime();
      setInterval(updateCurrentTime, 1000); // 每秒更新
    });

    // 选中的菜单项
    const menuIndex = ref(route.path)

    // 除版权登记外的其他菜单项
    const otherMenuItems = [
      { title: '版权市场', path: '/copyright-market' },
      { title: '芝麻AI', path: '/zhima-ai' },
      { title: '解决方案', path: '/solutions' },
      { title: '关于我们', path: '/about-us' }
    ]

    // 菜单选择处理
    const handleSelect = (item) => {
      if (item.path) {
        router.push(item.path)
      }
    }

    // 下拉命令处理
    const handleCommand = (command) => {
      const serviceMap = {
        // 版权服务
        'evidence': '/copyrightRegistration/evidence',
        'register': '/copyrightRegistration/register',
        'monitoring': '/copyrightRegistration/monitor',
        'electronic': '/copyrightRegistration/forensics',
        'online': '/copyrightMaintain/judicial',
        'prove': '/copyrightMaintain/law',
        
        // 关于我们
        'platform': '/aboutUs/detail',
        'news': '/aboutUs/newsCenter',
        'state': '/aboutUs/userAgreementtwo/1',
        
        // 用户相关
        'self': '/user',
        'copyrightListing': '/user/copyrightlist',
        'exit': '/'
      }
      
      if (command === 'exit') {
        store.dispatch('logout')
      }
      
      if (serviceMap[command]) {
        router.push(serviceMap[command])
      }
    }

    // 返回首页
    const toHome = () => {
      router.push('/')
    }

    // 登录/注册
    const goToLogin = (type) => {
      router.push({
        path: '/login',
        query: { status: type, redirect: route.fullPath }
      })
    }

    // 判断当前页面是否需要透明导航
    const isTransparent = computed(() => {
      return route.path === '/' || route.path === '/home'; // 这里可以根据需要调整
    })

    return {
      isLoggedIn,
      isTransparent,
      currentTimeValue,
      menuIndex,
      otherMenuItems,
      handleSelect,
      handleCommand,
      toHome,
      goToLogin
    }
  }
})
</script>

<style lang="scss" scoped>
.nav {
  width: 100%;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  
  // 导航顶部工具栏 - 永远不透明
  .nav-top {
    width: 100%;
    height: 30px;
    background-color: #000000; // 改为纯黑色，不透明
    
    .content {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      
      .left {
        .current-time {
          color: #ccc;
        }
      }
      
      .right {
        display: flex;
        gap: 20px;
        
        .tool-item {
          display: flex;
          align-items: center;
          cursor: pointer;
          
          img {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }
          
          span {
            color: #ccc;
            
            &:hover {
              color: #fff;
            }
          }
        }
      }
    }
  }
  .nav-banner{
    background-color: rgba(0, 0, 0, 0.5);
    height: 90px;
    width: 100%;
    margin-left: 0%; 
    margin-right: 0%;
    margin-top: 0%;
  }
  // 主导航栏 - 可以半透明
  .inner {
    width: 1200px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // 背景色通过navStyle动态控制
    
    .logo-box {
      width: 300px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      img {
        height: 50px;
        cursor: pointer;
        transition: transform 0.3s ease;
        
        &:hover {
          transform: scale(1.05);
        }
      }
    }
    
    .nav-content {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 30px;
      
      .nav-box {
        flex: 1;
        
        :deep(.el-menu) {
          border-bottom: none;
          display: flex;
          justify-content: center;
          background-color: transparent;
          
          .el-menu-item, .el-sub-menu__title {
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            height: 80px;
            line-height: 80px;
            transition: all 0.3s ease;
            
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 50%;
              width: 0;
              height: 2px;
              background-color: #53b7d7;
              transition: all 0.3s ease;
            }
            
            &:hover::after {
              width: 70%;
              left: 15%;
            }
          }
          
          .el-menu-item.is-active,
          .el-sub-menu.is-active .el-sub-menu__title {
            border-bottom: none !important;
            
            &::after {
              width: 70%;
              left: 15%;
            }
          }
          
          .el-menu-item.is-active::before {
            display: none !important;
          }
        }
      }
      
      .auth-buttons {
        display: flex;
        gap: 15px;
        align-items: center;
        
        .login-btn {
          color: #fff;
          
          &:hover {
            color: #53b7d7;
          }
        }
        
        .register-btn {
          padding: 8px 24px;
          border-radius: 16px;
          font-size: 14px;
          background: #53b7d7;
          border-color: #53b7d7;
          transition: all 0.3s ease;
          
          &:hover {
            background: #ffffff;
            color: #53b7d7;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(83, 183, 215, 0.2);
          }
        }
      }
      
      .user-avatar {
        margin-left: 20px;
        
        .avatar {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.2);
          cursor: pointer;
          transition: all 0.3s ease;
          
          img {
            width: 22px;
            height: 22px;
          }
          
          &:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
          }
        }
      }
    }
  }
}

// 透明导航样式
.nav--transparent {
  .nav-top {
    background-color: #000000; // 改为纯黑色不透明
  }
  
  .inner {
    // 背景色通过navStyle动态控制
  }
}

// 二维码弹窗样式
.qrcode-box {
  display: flex;
  padding: 15px;
  
  .qr-img {
    width: 100px;
    height: 100px;
  }
  
  .qr-info {
    margin-left: 15px;
    
    .title {
      color: #53b7d7;
      font-size: 16px;
      font-weight: 500;
    }
    
    .desc {
      margin-top: 8px;
      font-size: 12px;
      color: #606266;
    }
  }
}

// 下拉菜单样式
:deep(.nav-submenu) {
  background-color: rgba(0, 0, 0, 0.9);
  border: none;
  padding: 5px 0;
  min-width: 120px;
  
  .el-menu-item {
    height: 40px;
    line-height: 40px;
    color: #ffffff;
    padding: 0 20px;
    text-align: center;
    font-size: 14px;
    
    &:hover {
      background-color: rgba(83, 183, 215, 0.2);
      color: #53b7d7;
    }
    
    &.is-active {
      background-color: rgba(83, 183, 215, 0.2);
      color: #53b7d7;
      border-bottom: none !important;
    }
  }
  
  .popper__arrow {
    display: none;
  }
}

// 添加下拉菜单样式
:deep(.el-sub-menu) {
  .el-sub-menu__title {
    color: #ffffff;
    
    &:hover, &:focus {
      background-color: rgba(83, 183, 215, 0.2) !important;
    }
  }
  
  .el-menu--popup {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 5px 0;
    min-width: 160px;
    
    .el-menu-item {
      color: #ffffff;
      text-align: center;
      
      &:hover {
        background-color: rgba(83, 183, 215, 0.2);
        color: #53b7d7;
      }
      
      &.is-active {
        background-color: rgba(83, 183, 215, 0.2);
        color: #53b7d7;
        border-bottom: none !important;
      }
    }
  }
}

// 响应式设计
@media screen and (max-width: 1200px) {
  .nav {
    .nav-top .content,
    .inner {
      width: 100%;
      padding: 0 20px;
    }
    
    .nav-content .nav-box :deep(.el-menu) {
      justify-content: flex-start;
      
      .el-menu-item, .el-sub-menu__title {
        padding: 0 15px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .nav {
    .nav-top {
      display: none;
    }
    
    .inner {
      height: 60px;
      
      .logo-box {
        width: 200px;
        
        img {
          height: 40px;
        }
      }
      
      .nav-content {
        .nav-box {
          display: none;
        }
        
        .auth-buttons {
          .login-btn {
            display: none;
          }
          
          .register-btn {
            padding: 6px 15px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style> 
